<template>
	<div>
		<van-nav-bar
			title="打卡分享"
			left-text="返回"
			right-text="发表"
			left-arrow
			@click-left="onClickLeft"
			@click-right="onClickRight"
		/>
		<van-form>
			<van-field
				v-model="form.message"
				rows="2"
				autosize
				label="美食文案"
				type="textarea"
				maxlength="100"
				placeholder="快点来发表你的制作美食的想法吧"
				show-word-limit
				style="height: 150px"
			/>
			<van-field name="uploader" label="美食图片">
				<template #input>
					<van-uploader v-model="form.uploader" />
				</template>
			</van-field>
			<van-field name="radio" label="制作难度">
				<template #input>
					<van-radio-group v-model="form.difficultyValue" direction="horizontal">
						<van-radio name="简单">简单</van-radio>
						<van-radio name="一般">一般</van-radio>
						<van-radio name="困难">困难</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="checkbox" label="复选框">
				<template #input>
					<van-checkbox v-model="form.publicShare" shape="square" />
				</template>
			</van-field>
			<van-field name="rate" label="评分">
				<template #input>
					<van-rate v-model="form.rate" />
				</template>
			</van-field>
		</van-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				message: '',
				uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
				rate: 5,
				difficultyColumns: ['简单', '一般', '困难'],
				difficultyValue: '简单',
				publicShare: true,
			},
			showPicker: false,
		};
	},
	methods: {
		/** @method 发表打卡 */
		onClickRight() {
			const toast = this.$toast.loading({
				duration: 0, // 持续展示 toast
				forbidClick: true,
				message: '发布成功',
				type: 'success',
			});

			let second = 3;
			const timer = setInterval(() => {
				second--;
				if (second) {
					toast.message = `返回我的打卡 ${second} 秒`;
				} else {
					clearInterval(timer);
					// 手动清除 Toast
					this.$toast.clear();
					this.$router.push('/user/share');
				}
			}, 1000);
		},
		onConfirm(value) {
			this.form.difficultyValue = value;
			this.showPicker = false;
		},
	},
};
</script>

<style></style>
